<template>
	<view class="bizPage" :style="mainStore.themeColor">
		<status-bar title="个人信息" />
		<view class="padding20">
			<view class="card">
				<view class="item">
					<view class="label">姓名：</view>
					<input class="value" v-model="user_name" />
				</view>
				<view class="item">
					<view class="label">联系电话：</view>
					<view class="value">{{ mainStore.userInfo.phonenumber }}</view>
				</view>
				<view class="item" v-if="mainStore.userInfo.portType == 2">
					<view class="label">所属公司：</view>
					<view class="value">{{ mainStore.userInfo.enterpriseName }}</view>
				</view>
				<view class="item" v-if="mainStore.userInfo.portType == 2">
					<view class="label">所属部门：</view>
					<view class="value">{{ mainStore.userInfo.dept?.deptName }}</view>
				</view>
			</view>
		</view>
		
		<view class="btn flexac themeBg size28 white" @click="handleSave">保存</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useMainStore } from '@/stores/index'
	import { Toast } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import { saveMyInfo } from '@/utils/api.js'
	import statusBar from '../components/statusBar.vue'
	
	const mainStore = useMainStore()
	const user_name = ref(mainStore.userInfo.userName)
	
	const handleSave = () => {
		if(!user_name.value) return Toast('姓名不能为空')
		saveMyInfo({
			user_name: user_name.value
		})
	}
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F9F9F9;
	}
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 20rpx;
		.item {
			display: flex;
			padding: 30rpx 0;
			&:not(:last-child) {
				border-bottom: 1rpx solid #F2F2F2;
			}
			.label {
				font-size: 28rpx;
				color: #666;
			}
			.value {
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				color: #222;
			}
		}
	}
	.btn {
		width: 690rpx;
		height: 82rpx;
		border-radius: 20rpx;
		margin: 80rpx auto;
	}
</style>
